<template>
  <div class="bounty-container">
    <el-card class="filter-card">
      <div class="filter-header">
        <h3>筛选条件</h3>
      </div>
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="悬赏类型">
          <el-select v-model="filterForm.type" placeholder="选择类型">
            <el-option label="全部" value="" />
            <el-option label="技术支持" value="tech" />
            <el-option label="生活服务" value="life" />
            <el-option label="学习辅导" value="study" />
          </el-select>
        </el-form-item>
        <el-form-item label="价格区间">
          <el-input-number v-model="filterForm.minPrice" :min="0" placeholder="最低价" />
          <span class="price-separator">-</span>
          <el-input-number v-model="filterForm.maxPrice" :min="0" placeholder="最高价" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">筛选</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="bounty-list-card">
      <div class="bounty-header">
        <h3>悬赏列表</h3>
        <el-select v-model="sortType" placeholder="排序方式" @change="handleSort">
          <el-option label="最新发布" value="newest" />
          <el-option label="价格从高到低" value="priceDesc" />
          <el-option label="价格从低到高" value="priceAsc" />
        </el-select>
      </div>

      <el-empty v-if="bountyList.length === 0" description="暂无悬赏信息" />

      <div v-else class="bounty-list">
        <el-card v-for="item in bountyList" :key="item.id" class="bounty-item">
          <div class="bounty-item-header">
            <h4>{{ item.title }}</h4>
            <el-tag :type="getTagType(item.type)">{{ item.type }}</el-tag>
          </div>
          <div class="bounty-item-content">
            <p>{{ item.description }}</p>
          </div>
          <div class="bounty-item-footer">
            <div class="bounty-price">￥{{ item.price }}</div>
            <div class="bounty-actions">
              <el-button type="primary" size="small" @click="handleAccept(item)">接单</el-button>
              <el-button type="info" size="small" @click="handleDetail(item)">详情</el-button>
            </div>
          </div>
        </el-card>
      </div>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 筛选表单
const filterForm = reactive({
  type: '',
  minPrice: 0,
  maxPrice: 0
})

// 排序方式
const sortType = ref('newest')

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 悬赏列表
const bountyList = ref([
  {
    id: 1,
    title: '帮忙修复电脑蓝屏问题',
    description: '电脑经常蓝屏，需要有经验的人帮忙解决问题。',
    type: '技术支持',
    price: 200,
    createTime: '2023-05-01'
  },
  {
    id: 2,
    title: '寻找家教辅导高中数学',
    description: '高三学生，需要数学家教，每周两次，每次2小时。',
    type: '学习辅导',
    price: 150,
    createTime: '2023-05-02'
  },
  {
    id: 3,
    title: '帮忙取快递',
    description: '小区门口的快递站取5个快递送到3号楼2单元501。',
    type: '生活服务',
    price: 30,
    createTime: '2023-05-03'
  }
])

// 获取标签类型
const getTagType = (type: string) => {
  switch (type) {
    case '技术支持':
      return 'success'
    case '学习辅导':
      return 'warning'
    case '生活服务':
      return 'info'
    default:
      return ''
  }
}

// 筛选处理
const handleFilter = () => {
  // 这里应该调用API进行筛选
  ElMessage.success('筛选条件已应用')
  fetchBountyList()
}

// 重置筛选
const resetFilter = () => {
  filterForm.type = ''
  filterForm.minPrice = 0
  filterForm.maxPrice = 0
  fetchBountyList()
}

// 排序处理
const handleSort = () => {
  fetchBountyList()
}

// 分页大小变化
const handleSizeChange = (val: number) => {
  pageSize.value = val
  fetchBountyList()
}

// 页码变化
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  fetchBountyList()
}

// 接单处理
const handleAccept = (item: any) => {
  ElMessageBox.confirm(`确定要接取"${item.title}"的悬赏吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里应该调用接单API
    ElMessage.success('接单成功')
  }).catch(() => {
    // 取消操作
  })
}

// 查看详情
const handleDetail = (item: any) => {
  // 这里应该跳转到详情页或弹出详情对话框
  ElMessage.info(`查看悬赏详情：${item.title}`)
}

// 获取悬赏列表
const fetchBountyList = async () => {
  try {
    // 这里应该调用获取悬赏列表的API
    // 模拟API调用
    setTimeout(() => {
      total.value = bountyList.value.length
    }, 300)
  } catch (error) {
    console.error('获取悬赏列表失败', error)
    ElMessage.error('获取悬赏列表失败')
  }
}

onMounted(() => {
  fetchBountyList()
})
</script>

<style scoped lang="scss">
.bounty-container {
  padding: 20px;
  .filter-card {
    margin-bottom: 20px;
    
    .filter-header {
      margin-bottom: 15px;
    }
    
    .filter-form {
      .price-separator {
        margin: 0 5px;
      }
    }
  }
  
  .bounty-list-card {
    .bounty-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .bounty-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      
      .bounty-item {
        .bounty-item-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          
          h4 {
            margin: 0;
          }
        }
        
        .bounty-item-content {
          margin-bottom: 15px;
          color: #666;
          
          p {
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
        
        .bounty-item-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .bounty-price {
            font-size: 18px;
            font-weight: bold;
            color: #f56c6c;
          }
          
          .bounty-actions {
            display: flex;
            gap: 10px;
          }
        }
      }
    }
    
    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>